<template>
  <div>
    <h2>XScroll</h2>
    <XScroll>
      <div class="box">
        <div>
          <img :src="p1" alt="" />
        </div>
        <div>
          <img :src="p2" alt="" />
        </div>
        <div>
          <img :src="p3" alt="" />
        </div>
        <div>
          <img :src="p4" alt="" />
        </div>
        <div>
          <img :src="p5" alt="" />
        </div>
        <div>
          <img :src="p6" alt="" />
        </div>
        <div>
          <img :src="p7" alt="" />
        </div>
      </div>
    </XScroll>
  </div>
</template>

<script>
import p1 from "../assets/imgs/1.jpg";
import p2 from "../assets/imgs/2.webp";
import p3 from "../assets/imgs/3.webp";
import p4 from "../assets/imgs/4.webp";
import p5 from "../assets/imgs/5.webp";
import p6 from "../assets/imgs/6.webp";
import p7 from "../assets/imgs/7.jpg";
import XScroll from "./XScroll.vue";
export default {
  name: "HelloWorld",
  components: {
    XScroll,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      p1,
      p2,
      p3,
      p4,
      p5,
      p6,
      p7,
      count: 0,
    };
  },
};
</script>
<style scoped>
.box {
  /* border: 1px solid red; */
  display: flex;
  flex-direction: row;
}
.box img {
  height: 200px;
}
</style>